<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>功能测试页面 - 阿里宝宝</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .test-result {
            margin: 10px 0;
            padding: 10px;
            border-radius: 4px;
        }
        .success { background-color: #d4edda; color: #155724; }
        .error { background-color: #f8d7da; color: #721c24; }
        .info { background-color: #d1ecf1; color: #0c5460; }
        button {
            padding: 10px 20px;
            margin: 5px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn-primary { background-color: #007bff; color: white; }
        .btn-success { background-color: #28a745; color: white; }
        .btn-danger { background-color: #dc3545; color: white; }
    </style>
</head>
<body>
    <h1>阿里宝宝电商平台 - 功能测试</h1>
    
    <div class="test-section">
        <h2>1. API连接测试</h2>
        <button class="btn-primary" onclick="testAPI()">测试API连接</button>
        <div id="apiResult"></div>
    </div>

    <div class="test-section">
        <h2>2. 商品列表测试</h2>
        <button class="btn-primary" onclick="testProducts()">获取商品列表</button>
        <div id="productsResult"></div>
    </div>

    <div class="test-section">
        <h2>3. 商品详情测试</h2>
        <button class="btn-primary" onclick="testProductDetail()">获取商品详情</button>
        <div id="productDetailResult"></div>
    </div>

    <div class="test-section">
        <h2>4. 购物车测试</h2>
        <button class="btn-primary" onclick="testAddToCart()">添加到购物车</button>
        <button class="btn-primary" onclick="testGetCart()">获取购物车</button>
        <div id="cartResult"></div>
    </div>

    <div class="test-section">
        <h2>5. 用户认证测试</h2>
        <button class="btn-primary" onclick="testLogin()">测试登录</button>
        <button class="btn-primary" onclick="testRegister()">测试注册</button>
        <div id="authResult"></div>
    </div>

    <div class="test-section">
        <h2>6. 页面跳转测试</h2>
        <button class="btn-success" onclick="goToHome()">首页</button>
        <button class="btn-success" onclick="goToProducts()">商品分类</button>
        <button class="btn-success" onclick="goToCart()">购物车</button>
        <button class="btn-success" onclick="goToProductDetail()">商品详情</button>
    </div>

    <script src="js/api.js"></script>
    <script>
        // API连接测试
        async function testAPI() {
            const result = document.getElementById('apiResult');
            try {
                const response = await fetch('http://localhost:8000/api/categories');
                const data = await response.json();
                
                if (data.success) {
                    result.innerHTML = '<div class="test-result success">✓ API连接正常</div>';
                } else {
                    result.innerHTML = '<div class="test-result error">✗ API返回错误: ' + data.error + '</div>';
                }
            } catch (error) {
                result.innerHTML = '<div class="test-result error">✗ API连接失败: ' + error.message + '</div>';
            }
        }

        // 商品列表测试
        async function testProducts() {
            const result = document.getElementById('productsResult');
            try {
                const response = await api.getProducts();
                if (response.success) {
                    result.innerHTML = '<div class="test-result success">✓ 获取商品列表成功，共' + response.data.products.length + '个商品</div>';
                } else {
                    result.innerHTML = '<div class="test-result error">✗ 获取商品列表失败: ' + response.error + '</div>';
                }
            } catch (error) {
                result.innerHTML = '<div class="test-result error">✗ 获取商品列表失败: ' + error.message + '</div>';
            }
        }

        // 商品详情测试
        async function testProductDetail() {
            const result = document.getElementById('productDetailResult');
            try {
                const response = await api.getProductDetail('PROD001');
                if (response.success) {
                    result.innerHTML = '<div class="test-result success">✓ 获取商品详情成功: ' + response.data.name + '</div>';
                } else {
                    result.innerHTML = '<div class="test-result error">✗ 获取商品详情失败: ' + response.error + '</div>';
                }
            } catch (error) {
                result.innerHTML = '<div class="test-result error">✗ 获取商品详情失败: ' + error.message + '</div>';
            }
        }

        // 购物车测试
        async function testAddToCart() {
            const result = document.getElementById('cartResult');
            try {
                const response = await api.addToCart('PROD001', 1);
                if (response.success) {
                    result.innerHTML = '<div class="test-result success">✓ 添加到购物车成功</div>';
                } else {
                    result.innerHTML = '<div class="test-result error">✗ 添加到购物车失败: ' + response.error + '</div>';
                }
            } catch (error) {
                result.innerHTML = '<div class="test-result error">✗ 添加到购物车失败: ' + error.message + '</div>';
            }
        }

        async function testGetCart() {
            const result = document.getElementById('cartResult');
            try {
                const response = await api.getCart();
                if (response.success) {
                    result.innerHTML = '<div class="test-result success">✓ 获取购物车成功，共' + (response.data.items ? response.data.items.length : 0) + '个商品</div>';
                } else {
                    result.innerHTML = '<div class="test-result error">✗ 获取购物车失败: ' + response.error + '</div>';
                }
            } catch (error) {
                result.innerHTML = '<div class="test-result error">✗ 获取购物车失败: ' + error.message + '</div>';
            }
        }

        // 用户认证测试
        async function testLogin() {
            const result = document.getElementById('authResult');
            try {
                const response = await api.login('admin', '123456');
                if (response.success) {
                    result.innerHTML = '<div class="test-result success">✓ 登录成功: ' + response.data.username + '</div>';
                } else {
                    result.innerHTML = '<div class="test-result error">✗ 登录失败: ' + response.error + '</div>';
                }
            } catch (error) {
                result.innerHTML = '<div class="test-result error">✗ 登录失败: ' + error.message + '</div>';
            }
        }

        async function testRegister() {
            const result = document.getElementById('authResult');
            try {
                const userData = {
                    username: 'testuser' + Date.now(),
                    password: '123456',
                    email: 'test@example.com',
                    phone: '13800000000',
                    userType: 'Customer'
                };
                const response = await api.register(userData);
                if (response.success) {
                    result.innerHTML = '<div class="test-result success">✓ 注册成功: ' + response.data.username + '</div>';
                } else {
                    result.innerHTML = '<div class="test-result error">✗ 注册失败: ' + response.error + '</div>';
                }
            } catch (error) {
                result.innerHTML = '<div class="test-result error">✗ 注册失败: ' + error.message + '</div>';
            }
        }

        // 页面跳转
        function goToHome() {
            window.location.href = 'index.html';
        }

        function goToProducts() {
            window.location.href = 'products.html';
        }

        function goToCart() {
            window.location.href = 'cart.html';
        }

        function goToProductDetail() {
            window.location.href = 'product-detail.html?id=PROD001';
        }

        // 页面加载时自动运行API测试
        window.addEventListener('load', () => {
            testAPI();
        });
    </script>
</body>
</html>
